<template>
  <div class="course-container">
    <!--页头 start-->
    <div class="head-back">
      <div class="w">
        <i class="el-icon-back" @click="back()">&nbsp;课程中心</i>
      </div>
    </div>
    <!--页头 end-->
    <div class="course-content">
      <div class="w">
        <div class="course-info">
          <div class="course-title">
            <h1>Python基础语法</h1>
          </div>
          <div class="course-state">
            <span>课程进度</span>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
          </div>
          <div class="recent-study-level">
            <h2>最近解锁关卡:</h2>
            <span class="recent-study-level-title">第0关《print()函数与变量》</span>
            <button class="continue-btn">继续学习</button>
          </div>
        </div>
        <div class="course-level">
          <ul>
            <li>
              <div class="level-hd">
                <h2>第0关  print()函数与变量</h2>
                <el-button class="el-icon-delete" type="warning" @click="open" round>清空记录</el-button>
              </div>
              <div class="level-content">
                <div class="level-learn" @click="goTo()">
                  <span class="level-cover">
                    <img src="@/assets/images/pythonImage.png" alt="">
                  </span>
                  <span class="level-state">
                      <h2>课堂学习</h2>
                      <el-progress :percentage="100" :format="format" class="progress-bar"></el-progress>
                  </span>
                </div>
                <div class="level-test">
                  <span class="el-icon-document">
                  </span>
                  <span class="test-title">
                    关卡测试
                  </span>
                </div>
              </div>
            </li>
            <li>
              <div class="level-hd">
                <h2>第0关  print()函数与变量</h2>
                <el-button class="el-icon-delete" type="warning" @click="open" round>清空记录</el-button>
              </div>
              <div class="level-content">
                <div class="level-learn">
                  <span class="level-cover">
                    <img src="@/assets/images/pythonImage.png" alt="">
                  </span>
                  <span class="level-state">
                      <h2>课堂学习</h2>
                      <el-progress :percentage="100" :format="format" class="progress-bar"></el-progress>
                  </span>
                </div>
                <div class="level-test">
                  <span class="el-icon-document">
                  </span>
                  <span class="test-title">
                    关卡测试
                  </span>
                </div>
              </div>
            </li>
            <li>
              <div class="level-hd">
                <h2>第0关  print()函数与变量</h2>
                <el-button class="el-icon-delete" type="warning" @click="open" round>清空记录</el-button>
              </div>
              <div class="level-content">
                <div class="level-learn">
                  <span class="level-cover">
                    <img src="@/assets/images/pythonImage.png" alt="">
                  </span>
                  <span class="level-state">
                      <h2>课堂学习</h2>
                      <el-progress :percentage="100" :format="format" class="progress-bar"></el-progress>
                  </span>
                </div>
                <div class="level-test">
                  <span class="el-icon-document">
                  </span>
                  <span class="test-title">
                    关卡测试
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {};
  },
  created() {
  },
  methods: {
    back(){
      this.$router.push('/user');
    },
    // 小进度条
    format(percentage) {
      return percentage === 100 ? '100%' : `${percentage}%`;
    },
    // 清除学习记录
    open() {
      this.$confirm('此操作将清除第0关的学习记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '清除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清除'
        });
      });
    },
    goTo() {
      this.$router.push('/levelDetail');
    },
  },
  watch: {},
};
</script>
<style src="@/assets/css/course.css" scoped></style>
<style scoped>
@import "@/assets/css/base.css";
</style>